<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{:session('cp.cpsysname')}--商户管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="{:config('webconfig.description');}">
    <meta name="keywords" content="{:config('webconfig.keywords');}">
    <meta name="author" content="runoob">
    <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/member/css/core1.css?v=3"/>

    <script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
    <script src="__STATIC_URL__/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="__STATIC_URL__/static/layer/3.0.3/layer.js"></script>
    <script src="__STATIC_URL__/static/js/commen.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="__STATIC_URL__/static/js/layui-master/dist/layui.js"></script>
    <style type="text/css">
        .red {
            color: #FF6667;
        }

        .green {
            color: #66CC99;
        }

        .persont {
            font-size: 12px;
        }
        .info-row {
            line-height: 54px;
            color: #333;
        }
    </style>
</head>
<body>
{include file='public/header'/}
<section>
    <!------------------导航-------------------------->
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">
        <div class="page-heading mgl15 mgr15">
            <ul class="breadcrumb">
                <li> 当前位置是&nbsp;:&nbsp;</li>
                <li>
                   <a href="">营销工具</a>
                </li>
                <li class="active" style="color: #02b87f;"> 原会员导入</li>
            </ul>
        </div>
        <div class="mgl15 mgr15">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h5 class="panel-title"><span class="glyphicon glyphicon-search pull-left" style="margin-right: 10px;"></span>会员查找</h5>
                </div>
                <div class="panel-body">
                    <form action="" method="get" class="form-horizontal table-search form-search" role="form" id="machform">
                        <div class="col-sm-6 col-md-6 col-lg-4 ">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">姓名：</label>
                                <div class="col-sm-9">
                                    <input type="text"  autocomplete="off" disableautocomplete class="form-control"  placeholder="请输入" value="" name="name">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-4 ">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">卡号：</label>
                                <div class="col-sm-9">
                                    <input type="text" autocomplete="off" disableautocomplete class="form-control"  placeholder="请输入卡号" value="" name="old_code">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-4 ">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">状态：</label>
                                <div class="col-sm-9">
                                    <select name="statu" class="form-control">
                                        <option value="">请选择状态</option>
                                        <option value="0">未同步</option>
                                        <option value="1">已同步</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="panel-footer">
                    <a href="javascript:;" class="btn btn-primary" onclick="searchform()">查找</a>
                    <a href="javascript:;" class="btn btn-default" onclick="clearform()">清空</a>
                </div>
            </div>
            <div class="panel-body">
                <ul class="fenxilist clearfix">
                    <li class="col-sm-4">
                        <div>导入会员</div>
                        <div>{$user.count}人</div>
                    </li>
                    <li class="col-sm-4">
                        <div>已同步会员</div>
                        <div>{$user.syn}人</div>
                    </li>
                    <li class="col-sm-4">
                        <div>未同步会员</div>
                        <div>{$user.notsyn}人</div>
                    </li>
                </ul>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" style="position:relative;overflow: hidden">
                        导入列表
                    <div class="pull-right">
                        {if condition="checkPath('marke/synsetup')"}
                        <a class="btn btn-default" style="float: right" href="{:url('marke/synsetup')}">会员卡同步设置</a>
                        {/if}
                        {if condition="checkPath('marke/excel')"}
                        <button class="btn btn-default" data-toggle="modal" data-target="#myModal" >导入原会员</button>
                        {/if}
                    </div>
                </div>

                <div class="panel-body">
                    <table class="table table-bordered" id="tableExcel">
                        <thead>
                        <tr>
                            <th>姓名</th>
                            <th>电话</th>
                            <th>旧卡号</th>
                            <th>地址</th>
                            <th>积分</th>
                            <th>余额</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {volist name="list" id="vo"}
                        <tr>
                            <td>
                                <a  class="btn-link modalName" data-code="{$vo.new_code}" data-time="{$vo.update_time}" data-balance="{$vo.balance}" data-name="{$vo.name}" data-phone="{$vo.phone}" data-oldCode="{$vo.old_code}" data-bonus="{$vo.bonus}" data-address="{$vo.address}" data-statu="{$vo.statu}"> {$vo.name}</a>

                            </td>
                            <td>{$vo.phone}</td>
                            <td>{$vo.old_code}</td>
                            <td>{$vo.address}</td>
                            <td>{$vo.bonus}</td>
                            <td>{$vo.balance}</td>
                            <td>
                                {eq name="vo.statu" value="1"}
                                已同步
                                {else/}
                                未同步
                                {/eq}
                            </td>
                            <td><a class="btn-link" href="{:url('marke/deluser',['id'=>$vo['id']])}">删除</a></td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                    {$list->render()}
                </div>
            </div>
        </div>
        {include file='public/footer'/}
    </div>
</section>

<!-- Modal -->
<style>
    .modal-body p a {
        color: #2db7f5;
        background: transparent;
        text-decoration: none;
        outline: none;
        cursor: pointer;
        -webkit-transition: color .3s ease;
        transition: color .3s ease;
        display: inline-block;
        font-size: 14px;
    }

    .ant-upload.ant-upload-drag {
        border: 1px dashed #d9d9d9;
        -webkit-transition: border-color .3s ease;
        transition: border-color .3s ease;
        cursor: pointer;
        border-radius: 6px;
        text-align: center;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .ant-upload > span {
        display: block;
        width: 100%;
        outline: none;
    }

    .ant-upload.ant-upload-drag > span {
        display: table;
        height: 100%;
    }

    .ant-upload.ant-upload-drag .ant-upload-drag-container {
        display: table-cell;
        vertical-align: middle;
    }

    .ant-upload.ant-upload-drag p.ant-upload-drag-icon {
        height: 60px;
        margin-bottom: 24px;
    }

    .ant-upload.ant-upload-drag p.ant-upload-drag-icon .glyphicon-cloud-upload {
        font-size: 70px;
        margin-top: 0px;
        color: #57c5f7;
    }

    .ant-upload.ant-upload-drag p.ant-upload-text {
        font-size: 14px;
    }

    .ant-upload.ant-upload-drag p.ant-upload-hint {
        font-size: 12px;
        color: #999;
    }
</style>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Excel&nbsp;导入</h4>
            </div>
            <div class="modal-body text-center">
                <div class="alert alert-danger">单次导入请勿超过500条</div>
                <p>请先<a href="/uploads/excel/01.xlsx">下载模板</a></p>
                <div style="margin: 32px auto; width: 80%;">
                        <span class="">
                            <form action="" class="form-horizontal" id="excelform">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">导入门店：</label>
                                    <div class="col-sm-9">
                                        <input type="hidden" name="excel" id="excel">
                                        <select name="mid" class="form-control" id="selectmid" style="margin-bottom: 10px;" onchange="sel()">
                                            <option value="">所有门店</option>
                                                {volist name="mach" id="vo"}
                                            <option value="{$vo.id}">{$vo.merchant}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                  </div>
                            </form>
                            <div class="ant-upload ant-upload-drag hide">
                                <form action="" method="post">
                                <span class="rc-upload" tabindex="0" role="button">
                                    <input type="file" name="excel" id="test1"
                                           accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                                           style="width: 100%;cursor: pointer;height: 100%;display: block;position: absolute;left: 0;top: 0;opacity: 0;filter:Alpha(opacity=0);z-index: 1;">
                                    <div class="ant-upload-drag-container">
                                        <p class="ant-upload-drag-icon"><i class="glyphicon glyphicon-cloud-upload"></i></p>
                                        <p class="ant-upload-text">请选择您需要导入的文件</p>
                                        <p class="ant-upload-hint">支持扩展名：xls,xlsx</p>
                                    </div>


                                </span>
                                </form>
                            </div>
                            <button type="button" onclick="addform()" class="btn btn-primary" style="margin-top: 10px;">确认</button>
                        </span>
                </div>
            </div>
        </div>
    </div>
</div>
<!--查看会员信息-->
<div class="modal fade" id="modalName" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modalNameLabel">会员信息</h4>
            </div>
            <div class="modal-body">
                <div class="row info-row" id="templateHtml" style="margin-top: 15px;">
                    <div class="col-xs-6">
                        <label class="col-xs-4 text-right ng-binding">姓名：</label>
                        <div class="col-xs-8 ng-binding" id="cardName"></div>
                    </div>
                    <div class="col-xs-6">
                        <label class="col-xs-4 text-right">电话：</label>
                        <div class="col-xs-8" id="cardPhone"></div>
                    </div>
                    <div class="col-xs-6">
                        <label class="col-xs-4 text-right ng-binding">旧卡号：</label>
                        <div class="col-xs-8 ng-binding" id="cardOldCode"></div>
                    </div>
                    <div class="col-xs-6">
                        <label class="col-xs-4 text-right ng-binding">新卡号：</label>
                        <div class="col-xs-8" id="cardCode"></div>
                    </div>
                    <div class="col-xs-6">
                        <label class="col-xs-4 text-right ng-binding">地址：</label>
                        <div class="col-xs-8" id="cardAddress"></div>
                    </div>
                    <div class="col-xs-6">
                        <label class="col-xs-4 text-right ng-binding">积分：</label>
                        <div class="col-xs-8" id="cardBouns"></div>
                    </div>
                    <div class="col-xs-6 ng-scope">
                        <label class="col-xs-4 text-right ng-binding">余额：</label>
                        <div class="col-xs-8" id="cardBalance"></div>
                    </div>
                    <div class="col-xs-6">
                        <label class="col-xs-4 text-right ng-binding">状态：</label>
                        <div class="col-xs-8" id="cardStatu"></div>
                    </div>
                    <div class="col-xs-6">
                        <label class="col-xs-4 text-right ng-binding">同步时间：</label>
                        <div class="col-xs-8" id="cardTime"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    function sel() {
        var val = $("#selectmid").val();
        $("#excel").val("");
        if (val == "") {
            $(".ant-upload-drag").addClass("hide")
        } else {
            $(".ant-upload-drag").removeClass("hide")
        }
    }

    layui.use('upload', function () {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            , url: "{:url('uploads/uploadexcel')}" //上传接口
            , accept: "file"
            , exts: "xls|xlsx"
            , data: {
                name: 'excel'
            }
            , done: function (res) {
                $("#excel").val(res.url);
            }
            , error: function () {
                //请求异常回调
            }
        });
    });

    function addform() {
        var excel = $("#excel").val();
        var selectmid = $("#selectmid").val();
        if (excel == "") {
            layer.alert("请上传文件", {icon: 7});
            return false;
        }
        if (selectmid == "") {
            layer.alert("请选择门店", {icon: 7});
            return false;
        }
        $.ajax({
            url: "{:url('marke/excel')}",
            type: "post",
            data: $("#excelform").serialize(),
            success: function (data) {
                console.log(data);
                if (data.code == 0) {
                    layer.msg(data.message, {icon: 1});
                    setTimeout("window.location.reload()", 1000);
                    return false;
                } else {
                    layer.alert(data.message, {icon: 7});
                    return false;
                }
            }
        })
    }

    $(function () {
        $("#myModal").on("hide.bs.modal", function () {
            $("#excel").val("");
            $("#selectmid").val("");
        });
        $(".modalName").click(function(event){
            event.stopPropagation();
            var name = $(this).data("name");
            var phone= $(this).data("phone");
            var oldCode = $(this).data("oldcode");
            var address = $(this).data("address");
            var bouns = $(this).data("bonus");
            var balance = $(this).data("balance");
            var statu = $(this).data("statu");
            var code = $(this).data("new_code");
            var time = $(this).data("update_time");
            $("#cardName").text(name);
            $("#cardPhone").text(phone);
            $("#cardOldCode").text(oldCode);
            $("#cardAddress").text(address);
            $("#cardBouns").text(bouns);
            $("#cardBalance").text(balance);
            $("#cardCode").text(code);
            $("#cardTime").text(time);
            if(statu=="1"){
                $("#cardStatu").text("已同步");
            }else{
                $("#cardStatu").text("未同步");
            }
            $("#modalName").modal('show');
        })
    })
</script>


</html>
